<template>
  <div>
    <div class="shops">
      <div class="header">
        <van-nav-bar
            left-arrow
            @click-left="onClickLeft"
            fixed
        />
      </div>
      <div class="shops-bg"></div>
      <div class="shops-info-container">
        <div class="shops-info">
          <div class="shops-info-title">
            <div class="shops-logo"></div>
            <div class="shops-name">
              <h3>实惠餐馆</h3>
              <button class="label">关注</button>
            </div>
          </div>
          <p class="shops-introduce van-ellipsis">承蒙您的大驾光临，顿使寒舍蓬荜生辉</p>
          <div class="shops-label-list">
            <span>月售321</span>
            <span>好评100%</span>
            <span>距离13.95km</span>
          </div>
          <p class="shops-address van-ellipsis">
            江西省南昌市红谷滩江西省南昌市红谷滩江西省南昌市红谷滩
          </p>
        </div>
      </div>
      <div class="shops-content">
        <van-tabs v-model="active" sticky>
          <van-tab title="点餐">
            <div class="abc">
              <van-tree-select :items="items" :main-active-index.sync="active2">
                <template #content>
                  <GoodsCard @changeShop="changeShop"></GoodsCard>
                  <GoodsCard @changeShop="changeShop"></GoodsCard>
                  <GoodsCard></GoodsCard>
                  <GoodsCard></GoodsCard>
                  <GoodsCard></GoodsCard>
                  <GoodsCard></GoodsCard>
                  <GoodsCard></GoodsCard>
                  <GoodsCard></GoodsCard>
                  <GoodsCard></GoodsCard>
                  <GoodsCard></GoodsCard>
                  <GoodsCard></GoodsCard>
                </template>
              </van-tree-select>
            </div>

          </van-tab>
          <van-tab title="评论">内容 2</van-tab>
          <van-tab title="商家">内容 3</van-tab>
          <van-tab title="活动">内容 4</van-tab>
        </van-tabs>
      </div>
    </div>
    <gd-order-tabbar></gd-order-tabbar>
  </div>
</template>

<script>
import {NavBar, Tab, Tabs, TreeSelect} from 'vant';
import GoodsCard from "@/components/OrderCard/GoodsCard";
import GOrderTabbar from "@/components/GOrderTabbar/GOrderTabbar";

export default {
  name: "Shops",
  data() {
    return {
      value: 3,
      active: 0,
      active2: 0,
      items: [{text: '分组 1'}, {text: '分组 2'}]
    }
  },
  components: {
    'van-nav-bar': NavBar,
    'van-tabs': Tabs,
    'van-tab': Tab,
    'van-tree-select': TreeSelect,
    GoodsCard,
    'gd-order-tabbar' :GOrderTabbar
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    changeShop(x){
      console.log(x);
    }
  },
  mounted() {
    console.log(this.$store.state.cart); 
  }
}
</script>

<style lang="scss" e scoped>
@import "./Shops.scss";
</style>
